<template>
  <div class="home">
    <!-- <van-button type="info">主要按钮</van-button> -->
    <!-- <van-stepper v-model="value"></van-stepper> -->
    <!-- 首页搜索框 -->
    <van-search
      v-model="SearchVal"
      shape="round"
      placeholder="请输入搜索关键词"
      disable
      @click="$router.push('/home/searchPopup')"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="blue">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img
          :src="item.image_url"
          width="100%"
          alt=""
          :style="{ display: 'block' }"
        />
      </van-swipe-item>
    </van-swipe>

    <!-- 进场过渡：name属性 -->
    <transition name="van-slide-right">
      <!-- 占位符 -->
      <router-view></router-view>
    </transition>

  </div>
</template>

<script>
// @ is an alias to /src
// import "@/vantui";

// import axios from 'axios'
// import request from "@/request/request";
import { GetHomeList } from "@/request/api";
export default {
  name: "Home",
  data() {
    return {
      // value: 1,
      SearchVal: "", // 搜索框的v-model值
      banner: [], // 轮播图默认空数组
    };
  },
  created() {
    GetHomeList()
      .then((res) => {
        // 请求成功之后执行这里的代码
        // console.log(res.data);
        this.banner = res.data.banner; // 获取轮播图数据
      })
      .catch((err) => {
        // 请求失败之后，执行这里的代码
        // console.error(err);
      });
  },
  components: {},
};
</script>

<style lang="less">
// .slide-enter,
// .slide-leave-to {
//   // 过渡开始之前的样式写在这里
//   right: -100%;
// }
// .slide-enter-active,
// .slide-leave-active {
//   // 过渡属性写在这里
//   transition: right 0.3s;
// }
// .slide-enter-to,
// .slide-leave {
//   // 过渡结束之后的样式写在这里
//   right: 0;
// }
</style>
